<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Join us!	-----Welcome to Lumen</title>
<script language="javascript">
	function showCustomerReg() {
		var cus = document.getElementById("customerRegister");
		var rest = document.getElementById("restaurantRegister");
		cus.style.display = "block";
		rest.style.display = "none";
	}
	
	function showRestaurantReg() {
		var cus = document.getElementById("customerRegister");
		var rest = document.getElementById("restaurantRegister");
		cus.style.display = "none";
		rest.style.display = "block";
	}
	
	function validate() {
		var type = document.getElementById("cus");
		if (type.checked) {
			var login_name = document.getElementById("login_name0").value;
			var name = document.getElementById("name0").value;
			var pw = document.getElementById("passcode0").value;
			var pw_confirm = document.getElementById("passcode_confirm0").value;
			var add = document.getElementById("address0").value;
			var phone = document.getElementById("phone0").value;
			var email = document.getElementById("Email0").value;
			var accepted = document.getElementById("regulation");
			
			var reg = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
			
			if (login_name == "") {
				alert("User name cannot be empty!");
				return false;
			}
			if (name == "") {
				alert("Nick name cannot be empty!");
				return false;
			}
			if (pw == "") {
				alert("Password cannot be empty!");
				return false;
			}
			if (add == "") {
				alert("Address cannot be empty!");
				return false;
			}
			if (phone == "") {
				alert("Phone number cannot be empty!");
				return false;
			}
			if (email != "" && !email.match(reg)) {
				alert("Email address is not valid!");
				return false;
			}
			if (pw != pw_confirm) {
				alert("Two passwords are not equal!");
				return false;
			}
			if (accepted.checked == false) {
				alert("You should accept Lumen's regualtion!");
				return false;
			}
			return true;
		}
		else {
			var login_name = document.getElementById("login_name1").value;
			var name = document.getElementById("name1").value;
			var pw = document.getElementById("passcode1").value;
			var pw_confirm = document.getElementById("passcode_confirm1").value;
			var add = document.getElementById("address1").value;
			var phone = document.getElementById("phone1").value;
			var email = document.getElementById("Email1").value;
			var accepted = document.getElementById("regulation");
			
			var reg = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
			
			if (login_name == "") {
				alert("User name cannot be empty!");
				return false;
			}
			if (name == "") {
				alert("Restaurant name cannot be empty!");
				return false;
			}
			if (pw == "") {
				alert("Password cannot be empty!");
				return false;
			}
			if (add == "") {
				alert("Address cannot be empty!");
				return false;
			}
			if (phone == "") {
				alert("Phone number cannot be empty!");
				return false;
			}
			if (pw != pw_confirm) {
				alert("Two passwords are not equal!");
				return false;
			}
			if (email != "" && !email.match(reg)) {
				alert("Email address is not valid!");
				return false;
			}
			if (accepted.checked == false) {
				alert("You should accept Lumen's regualtion!");
				return false;
			}
			return true;
		}
	}
	
</script>

</head>
	
<body>
<p align = center><a href="index.jsp"><img height="118" src="Pics/restaurantLogo.JPG" width="242" border="0"></a></p>
	<form id="register" method="post" action="./servlet/Register" onsubmit="return validate(this)"> 
    	<table name="userTypeSelection" width="700" align="center">
        	<tr>
            	<td align="center"><input type="radio" id="cus" name="userType" value="cus" checked="checked" onclick="showCustomerReg()" />Customer</td>
                <td align="center"><input type="radio" id="rest" name="userType" value="rest" onclick="showRestaurantReg()"/>Restaurant</td>
            </tr>
        </table>
        <table id="customerRegister" width="700" align="center">
        	<tr>
            	<td align="center" width="300">User name :</td>
                <td align="left" width="400"><input width="300" type="text" name="login_name0" /></td>
            </tr>
            <tr>
            	<td align="center" width="300">Nick name :</td>
                <td align="left" width="400"><input width="300" type="text" name="name0"  /></td>
            </tr>
            <tr>
            	<td align="center" width="300">Password :</td>
                <td align="left" width="400"><input width="300" type="password" name="passcode0"  /></td>
            </tr>
            <tr>
            	<td align="center" width="300">Confirm password</td>
                <td align="left" width="400"><input width="300" type="password" name="passcode_confirm0"  /></td>
            </tr>
            <tr>
            	<td align="center" width="300">Address</td>
                <td align="left" width="400"><input width="300" type="text" name="address0"  /></td>
            </tr>
            <tr>
            	<td align="center" width="300">Phone</td>
                <td align="left" width="400"><input width="300" type="text" name="phone0"  /></td>
            </tr>  
            <tr>
            	<td align="center" width="300">Email</td>
                <td align="left" width="400"><input width="300" type="text" name="Email0"  /></td>
            </tr> 
        </table>
       
        <table id="restaurantRegister" width="700" align="center" style="display:none">
        	<tr>
            	<td align="center" width="300">User name :</td>
                <td align="left" width="400"><input width="300" type="text" name="login_name1"  /></td>
            </tr>
            <tr>
            	<td align="center" width="300">Restaurant name :</td>
                <td align="left" width="400"><input width="300" type="text" name="name1"  /></td>
            </tr>
            <tr>
            	<td align="center" width="300">Password :</td>
                <td align="left" width="400"><input width="300" type="password" name="passcode1"  /></td>
            </tr>
            <tr>
            	<td align="center" width="300">Confirm password</td>
                <td align="left" width="400"><input width="300" type="password" name="passcode_confirm1"  /></td>
            </tr>
            <tr>
            	<td align="center" width="300">Address</td>
                <td align="left" width="400"><input width="300" type="text" name="address1"  /></td>
            </tr>
            <tr>
            	<td align="center" width="300">Phone</td>
                <td align="left" width="400"><input width="300" type="text" name="phone1"  /></td>
            </tr>
            <tr>
            	<td align="center" width="300">Email</td>
            	<td align="left" width="400"><input width="300" type="text" name="email1"  /></td>
            </tr>   
        </table>
        
        <table name="regulationAccepted" width="350" align="center">
        	<tr><td><input type="checkbox" name="regulation" value="regulation" />Accept the regulation</td></tr>
        </table>
       
        <table name="submission" width="700" align="center">
        	<tr>
            	<td align="center"><input type="submit" name="submit" value="Register" /></td>
                <td align="left"><input type="reset" name="reset" value="Reset"/></td>
            </tr>
        </table>
	</form>
</body>
</html>